<template>
  <div class="all">
    <div style="width: 100%; height: 10px"></div>
    <div class="headerbox">
      <div
        style="
          display: flex;
          width: 25%;
          height: 60px;
          margin-top: 20px;
          border-right: 1px solid #eee;
        "
      >
        <img src="../image/icon_cg.png" alt="采购部" />
        <div class="container">
          <svg width="120" height="140" class="text">
            <!-- 定义渐变颜色 -->
            <defs>
              <linearGradient id="geekColor" gradientTransform="rotate(90)">
                <stop offset="0%" stop-color="#91bd3a">
                  <!-- 渐变动画 -->
                  <animate
                    attributeName="stop-color"
                    values="#91bd3a;#12cad6;#91bd3a"
                    dur="10s"
                    begin="3s"
                    repeatCount="indefinite"
                  ></animate>
                </stop>

                <stop offset="100%" stop-color="#12cad6">
                  <animate
                    attributeName="stop-color"
                    values="#12cad6;#91bd3a;#12cad6"
                    dur="10s"
                    begin="3s"
                    repeatCount="indefinite"
                  ></animate>
                </stop>
              </linearGradient>
            </defs>

            <text class="logo_text" x="0" y="100">嘉世采购平台</text>
          </svg>
        </div>
      </div>
    </div>

    <div class="tbody">
      <div class="look">
        <div class="ground">
          <ul class="gul">
            <li>
              <div class="d1">
                <img src="../image/iconsCg01.png" />
                <div>寻源阶段</div>
              </div>
              <div class="empty-box" v-show="pursList.length == 0">
                <el-empty :image-size="140"></el-empty>
              </div>
              <div class="d2" v-show="pursList.length > 0">
                <div>
                  共计：
                  <h3>{{ pursList.length }}</h3>
                  个项目
                </div>

                <ul class="dul">
                  <li v-for="(item, index) in pursList" :key="index">
                    <span class="dul-title" @click="purDetails(item)">{{
                      item.planName
                    }}</span>
                    <br />
                    <span class="title-details">编号：{{ item.planCode }}</span>
                    <br />
                    <span class="title-details"
                      >负责人：{{ item.creater }}</span
                    >
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="d1">
                <img src="../image/iconsCg01.png" />
                <div>招标阶段</div>
              </div>
              <div class="empty-box" v-show="bindList.length == 0">
                <el-empty :image-size="140"></el-empty>
              </div>
              <div class="d2" v-show="bindList.length > 0">
                <div>
                  共计：
                  <h3>{{ bindList.length }}</h3>
                  个项目
                </div>

                <ul class="dul">
                  <li v-for="(item, index) in bindList" :key="index">
                    <span class="dul-title" @click="bindDetails(item)">{{
                      item.bindName
                    }}</span>
                    <br />
                    <span class="title-details"
                      >负责人：:{{ item.bindPerson }}</span
                    >
                    <br />
                    <span class="title-details"
                      >联系方式：{{ item.phone }}</span
                    >
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="d1">
                <img src="../image/iconsCg01.png" />
                <div>投标阶段</div>
              </div>
              <div class="empty-box" v-show="tbList.length == 0">
                <el-empty :image-size="140"></el-empty>
              </div>
              <div class="d2" v-show="tbList.length > 0">
                <div>
                  共计：
                  <h3>{{ tbList.length }}</h3>
                  个项目
                </div>

                <ul class="dul">
                  <li v-for="(item, index) in tbList" :key="index">
                    <span class="dul-title" @click="tbDetails(item)">{{
                      item.bindName
                    }}</span>
                    <br />
                    <span class="title-details"
                      >负责人：:{{ item.bindPerson }}</span
                    >
                    <br />
                    <span class="title-details"
                      >联系方式：{{ item.phone }}</span
                    >
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <div class="d1">
                <img src="../image/iconsCg01.png" />
                <div>候选阶段</div>
              </div>
              <div class="empty-box" v-show="hxList.length == 0">
                <el-empty :image-size="140"></el-empty>
              </div>
              <div class="d2" v-show="hxList.length > 0">
                <div>
                  共计：
                  <h3>{{ hxList.length }}</h3>
                  个项目
                </div>

                <ul class="dul">
                  <li v-for="(item, index) in hxList" :key="index">
                    <span class="dul-title" @click="hxDetails(item)">{{
                      item.bindName
                    }}</span>
                    <br />
                    <span class="title-details"
                      >负责人：:{{ item.bindPerson }}</span
                    >
                    <br />
                    <span class="title-details"
                      >联系方式：{{ item.phone }}</span
                    >
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="right0">
        <div class="right1">
          <ul>
            <a click="xuqiu" class="xuqiu">
              <li>
                <img src="../image/1caigou001.png" />
                <span style="font-family: '仿宋'; font-weight: bold"
                  >采购需求</span
                >
              </li>
            </a>
            <li>
              <a click="shenqing" class="xuqiu">
                <li>
                  <img src="../image/1caigou002.png" />
                  <span style="font-family: '仿宋'; font-weight: bold"
                    >采购申请</span
                  >
                </li>
              </a>
            </li>
            <li>
              <a click="xunyuan" class="xuqiu">
                <li>
                  <img src="../image/1caigou003.png" />
                  <span style="font-family: '仿宋'; font-weight: bold"
                    >采购寻源</span
                  >
                </li>
              </a>
            </li>
            <li>
              <a click="hetong" class="xuqiu">
                <li>
                  <img src="../image/1caigou004.png" />
                  <span style="font-family: '仿宋'; font-weight: bold"
                    >采购合同</span
                  >
                </li>
              </a>
            </li>
            <li>
              <a click="dingdan" class="xuqiu">
                <li>
                  <img src="../image/1caigou005.png" />
                  <span style="font-family: '仿宋'; font-weight: bold"
                    >采购订单</span
                  >
                </li>
              </a>
            </li>
          </ul>
        </div>

        <div class="right2">
          <span
            style="
              margin: 10px 20px;
              display: inline-block;
              color: #2b4bab;
              font-family: '仿宋';
              font-weight: bold;
              font-size:17px
            "
            >供应商信息</span
          >
          <a
            click="shuaxin"
            style="float: right"
            class="el-icon-refresh-right"
            @click="supReload"
          ></a>
          <div style="width: 410px; height: 340px; box-sizing: border-box">
            <el-table border :data="supList" style="width: 100%">
              <el-table-column label="供应商名称" align="center" prop="supName">
                <template slot-scope="scope">
                  <div class="supName-box">{{ scope.row.supName }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="法人"
                align="center"
                prop="legPerson"
                width="100"
              />
              <el-table-column
                label="联系方式"
                align="center"
                prop="unitRegPhone"
                width="120"
              >
                <template slot-scope="scope">
                  <span style="font-family: '毛笔体'">
                    {{ scope.row.unitRegPhone }}</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="right3">
          <span
            style="
              margin: 10px 20px;
              display: inline-block;
              color: #2b4bab;
              font-family: '仿宋';
              font-weight: bold;
              font-size:17px
            "
            >专家信息</span
          >
          <a
            click="shuaxin"
            style="float: right"
            class="el-icon-refresh-right"
            @click="expertReload"
          ></a>
          <el-table :data="expertList" border>
            <el-table-column
              label="姓名"
              align="center"
              prop="expertName"
              width="170px"
            >
              <template slot-scope="scope">
                <div class="expertName-box" @click="ExpertDetials(scope.row)">
                  {{ scope.row.expertName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="主评专业"
              align="center"
              prop="type"
              width="116px"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.basic_expert_type"
                  :value="scope.row.type"
                />
              </template>
            </el-table-column>

            <el-table-column
              label="手机号"
              align="center"
              prop="phone"
              width="130px"
            >
            <template slot-scope="scope">
              <span style="font-family:'毛笔体'">{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="zhongxin">
        <div class="titles-boxs">
          <span
            style="
              color: #2b4bab;
              float: left;
              font-family: '仿宋';
              font-weight: bold;
              font-size: 17px;
              margin-top: 10px;
              margin-left: 10px;
            "
            >合同列表</span
          >
          <a
            click="shuaxin"
            style="float: right"
            class="el-icon-refresh-right"
            @click="constractReload"
          ></a>
          <el-table :data="contractList">
            <el-table-column
              label="合同编号"
              align="center"
              prop="contractCode"
              width="200px"
            >
              <template slot-scope="scope">
                <div style="font-family: '毛笔体'">
                  {{ scope.row.contractCode }}
                </div>
              </template>
            </el-table-column>

            <el-table-column
              label="合同名称"
              align="center"
              prop="contractName"
            />
            <el-table-column
              label="合同类型"
              align="center"
              prop="contractType"
              width="200px"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.bs_contract_type"
                  :value="scope.row.contractType" /></template
            ></el-table-column>

            <el-table-column label="合同金额" align="center" prop="totalMoney">
              <template slot-scope="scope">
                <div style="font-family: '毛笔体'">
                  {{ scope.row.totalMoney }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="密级" align="center" prop="privacy" />
          </el-table>
        </div>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item>
            <template slot="label"> 寻源计划名称 </template>
            <div style="width: 240px; font-family: '毛笔体'">
              {{ showPurItem.planName }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 寻源编号 </template>
            <span style="font-family: '毛笔体'">
              {{ showPurItem.planCode }}</span
            >
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 业务类型 </template>
            <dict-tag
              :options="dict.type.business_type"
              :value="showPurItem.busiType"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 状态 </template>
            <dict-tag
              :options="dict.type.purs_statu"
              :value="showPurItem.status"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 创建时间 </template>
            <span style="font-family: '毛笔体'">
              {{ myFormatTime(showPurItem.creatTime) }}</span
            >
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 负责人 </template>
            {{ showPurItem.creater }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="BinddialogVisible"
      width="70%"
      :before-close="handleCloseBind"
    >
      <bindInfo :bind="bind"></bindInfo>
      <span slot="footer" class="dialog-footer">
        <el-button @click="BinddialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--候选阶段-->
    <el-dialog
      title="提示"
      :visible.sync="hxDialogVisible"
      width="60%"
      :before-close="handleCloseHx"
    >
      <div>
        <h3 style="color: black; font-weight: bold">候选人列表</h3>
        <el-table :data="cddList" border style="margin-top: 20px">
        
          <!-- 添加序号列 -->
          <el-table-column
            label="序号"
            type="index"
            width="70"
            align="center"
            index-method="indexMethod"
          />

          <el-table-column
            label="供应商名称名称"
            align="center"
            prop="supName"

            width="240px"
          />

          <el-table-column
            label="最终报价(万元)"
            align="center"
            prop="finalQuote"
          >
          <template slot-scope="scope">
            <div style="font-family: '黑体'">{{  scope.row.finalQuote }}</div>
          </template>
          </el-table-column>
          <el-table-column label="最终得分" align="center" prop="finalScore" >
            <template slot-scope="scope">
            <div style="font-family: '黑体'">{{  scope.row.finalScore }}</div>
          </template>
          </el-table-column>
          <el-table-column label="是否推荐" align="center" prop="recommended">
            <template slot-scope="scope">
              <dict-tag
                class="dict-box"
                :options="dict.type.pur_recom_state"
                :value="scope.row.recommended"
              />
            </template>
          </el-table-column>
          <el-table-column label="排名" align="center" prop="ranking" >
            <template slot-scope="scope">
            <div style="font-family: '黑体'">{{  scope.row.ranking }}</div>
          </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="cddTotal > 0"
          :total="cddTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getcddList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hxDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--投标阶段-->
    <el-dialog
      title="提示"
      :visible.sync="tbDialogVisible"
      width="60%"
      :before-close="handleClosetTb"
    >
      <div>
        <el-table :data="delvList" border>
        
          <el-table-column label="供应商编号" align="center" prop="supCode" >
            <template slot-scope="scope">
              <div style="font-family: '毛笔体'">{{ scope.row.supCode }}</div>
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" align="center" prop="supName"  width="200px"/>
          <el-table-column label="投标状态" align="center" prop="delvStatus" >
            <template slot-scope="scope">
              <div style="font-family: '毛笔体'">{{ scope.row.delvStatus==1?'投递成功':'投递失败' }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="递交时间"
            align="center"
            prop="delvCreateTime"
            width="180"
          >
            <template slot-scope="scope">
              <span style="font-family: '毛笔体'">{{
                parseTime(scope.row.delvCreateTime, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="uploadFile(scope.row)"
                v-hasPermi="['purs:delv:edit']"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="DelvTotal > 0"
          :total="DelvTotal"
          :page.sync="queryDelvParams.pageNum"
          :limit.sync="queryDelvParams.pageSize"
          @pagination="getDelvList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tbDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--专家信息-->
    <el-dialog
      title="专家信息"
      :visible.sync="expertDialogVisible"
      width="50%"
      :before-close="handleCloseExpert"
    >
      <!-- 个人卡片容器，居中卡片 -->
      <div class="wrapper">
        <!-- 个人卡片 -->
        <div class="profile-card">
          <!-- 卡片内容，导航，个人简介和工作经历 -->
          <div class="content">
            <!-- 导航 -->
            <nav id="nav-menu">
              <!-- data-rel，在js里获取当前要展示哪个section，是个人简介还是工作经历 -->
              <a class="active" href="#" data-rel="about-me-section"
                >个人简介</a
              >
            </nav>

            <section class="about-me-section active-section">
              <div class="personal-info">
                <div class="title">
                  <h1
                    style="font-weight: bold; font-family: '仿宋'; color: black"
                  >
                    {{ expertItem.expertName }}
                  </h1>
                  <p style="width: 300px">
                    <span
                      style="
                        color: red;
                        margin-left: 50px;
                        font-family: '仿宋';
                        font-weight: bold;
                      "
                      >{{ expertItem.workUnit }}</span
                    >
                  </p>
                </div>
              </div>
              <!-- 个人简介的内容 -->
              <div class="about-me">
                <p>
                  <span
                    style="
                      font-family: '仿宋';
                      font-weight: bold;
                      line-height: 30px;
                    "
                  >
                    联系方式:{{ expertItem.phone }}</span
                  >
                  <br />
                  <span
                    style="
                      font-family: '仿宋';
                      font-weight: bold;
                      line-height: 30px;
                    "
                  >
                    邮箱:{{ expertItem.email }}</span
                  >
                  <br />
                  <span
                    style="
                      font-family: '仿宋';
                      font-weight: bold;
                      line-height: 30px;
                    "
                  >
                    住址:{{ expertItem.address }}</span
                  >
                  <br />

                  <br />
                </p>
              </div>
            </section>
          </div>
          <!-- 头像 -->
          <aside class="profile-image">
            <img :src="img" />
          </aside>
        </div>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import bindInfo from "@/components/Bind/bindInfo";
import {
  updatePurs,
  getPlanDetails,
  getPlanFinish,
  getPlanFinishNewBest,
} from "@/api/purs/purs";
import {
  listContract,
  getContract,
  delContract,
  addContract,
  updateContract,
} from "@/api/basic/contract";
import { listCdd, getCdd, delCdd, addCdd, updateCdd } from "@/api/purs/cdd";
import utils from "@/api/utils/utils.js";
import { getInfo } from "@/api/login";
import { listBind, listNewBest } from "@/api/purs/bind";
import { listDelv } from "@/api/purs/delv";
import { listSup } from "@/api/basic/supplier";
import {
  listExpert,
  getExpert,
  delExpert,
  addExpert,
  updateExpert,
} from "@/api/expert/expert";
import {
  listExpertFile,
  getExpertFile,
  delExpertFile,
  addExpertFile,
  updateExpertFile,
} from "@/api/basic/expertFile";
export default {
  dicts: [
    "business_type",
    "purs_statu",
    "records_statu",
    "pur_methods",
    "pur_bind_status",
    "pur_eav_statu",
    "pur_recom_state",
    "basic_expert_type",
    "bs_contract_type",
    "bs_constract_statu",
  ],
  components: {
    bindInfo: bindInfo,
  },
  data() {
    return {
      bind: {},
      pursList: [],
      bindCode: {},
      dialogVisible: false,
      showPurItem: {},
      BinddialogVisible: false,
      bindList: [],
      hxDialogVisible: false,
      tbList: [],
      hxList: [],
      tbDialogVisible: false,
      queryCddParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bindName: null,
        status: 2,
      },
      cddTotal: 0,
      cddList: [],
      queryDelvParams: {
        pageNum: 1,
        pageSize: 10,
      },
      delvList: [],
      DelvTotal: 1,
      supList: [],
      expertList: [],
      expertDialogVisible: false,
      expertItem: {},
      img: {},
      contractList: [],
    };
  },

  created() {
    this.loginInit();
    this.getList();
    this.getBindList();
    this.getTbList();
    this.getHxList();
    this.getListSup();
    this.expertInit();
    this.constractInit();
  },
  methods: {
    constractReload() {
      this.constractInit();
    },
    //合同列表
    constractInit() {
      listContract({}).then((res) => {
        console.log("Res123:" + JSON.stringify(res));
        this.contractList = res.rows;
      });
    },

    handleCloseExpert() {
      this.expertDialogVisible = false;
    },

    ExpertDetials(row) {
      this.expertDialogVisible = true;

      this.expertItem = row;
      listExpertFile({
        expertCode: row.expertCode,
      }).then((res) => {
        this.img = res.rows[0].url;
      });
    },

    expertReload() {
      this.expertInit();
    },

    //专家列表
    expertInit() {
      listExpert().then((res) => {
        this.expertList = res.rows;
      });
    },

    supReload() {
      this.getListSup();
    },

    //供应商列表
    getListSup() {
      listSup().then((res) => {
        console.log("res:" + JSON.stringify(res));
        this.supList = res.rows;
      });
    },

    /** 查询投递标书列表 */
    getDelvList() {
      this.queryDelvParams.bindCode = this.bindCode;
      listDelv(this.queryDelvParams).then((response) => {
        this.delvList = response.rows;
        this.DelvTotal = response.total;
      });
    },
    handleClosetTb() {
      this.tbDialogVisible = false;
    },

    handleCloseHx() {
      this.hxDialogVisible = false;
    },

    hxDetails(row) {
      this.bindCode = row.bindCode;
      this.getcddList();
      this.hxDialogVisible = true;
    },

    getHxList() {
      this.queryParams.status = 5;
      listNewBest(this.queryParams).then((response) => {
        this.hxList = response.data;
      });
    },

    /** 查询候选人列表列表 */
    getcddList() {
      this.queryCddParams.bindCode = this.bindCode;
      listCdd(this.queryCddParams).then((response) => {
        console.log("Res:" + JSON.stringify(response));
        this.cddList = response.rows;
        this.cddTotal = response.total;
      });
    },
    handleCloseTb() {
      this.tbDialogVisible = false;
    },
    uploadFile(row) {
      console.log(JSON.stringify(row));
      window.location.href = row.filePath;
    },
    tbDetails(row) {
      this.bindCode = row.bindCode;
      this.getDelvList();
      this.tbDialogVisible = true;
    },

    handleCloseBind() {
      this.BinddialogVisible = false;
    },

    bindDetails(row) {
      this.bind = row;
      this.BinddialogVisible = true;
    },
    /** 查询投标阶段 */
    getTbList() {
      this.queryParams.status = 3;
      listNewBest(this.queryParams).then((response) => {
        this.tbList = response.data;
      });
    },
    /** 查询招标项目列表 */
    getBindList() {
      listNewBest(this.queryParams).then((response) => {
        this.bindList = response.data;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },

    //点击阶段标题查看详情
    purDetails(row) {
      this.showPurItem = row;
      this.dialogVisible = true;
    },

    /** 查询采购计划.审批通过后生成招标项目列表 */
    getList() {
      getPlanFinishNewBest().then((response) => {
        this.pursList = response.data;
      });
    },
    myFormatTime(time) {
      return utils.myformatter(new Date(time));
    },

    loginInit() {
      getInfo().then((response) => {
        sessionStorage.setItem("userName", response.user.nickName);
        sessionStorage.setItem("deptName", response.user.dept.deptName);
      });
    },
  },
};
</script>

<style scope>
.all {
  width: 100%;
  height: 1170px;
  padding-bottom: 10px;
  background-color: rgb(232, 237, 244);
}

.headerbox {
  background-color: white;
  width: 98%;
  height: 100px;
  display: flex;
  margin-left: 15px;
}

.headerbox img {
  margin-left: 15px;
}

.tel {
  padding-left: 30px;
}

.tel h3 {
  font-size: 16px;
  height: 10px;
  font-weight: bold;
  font-weight: normal;
}

.cont {
  position: relative;
  display: inline-block;
  width: 75%;
  vertical-align: middle;
  list-style-type: none;
}

.cont li {
  float: left;
  width: 20%;
  text-align: center;
}

.cont li h3 {
  color: #2b4bab;
  font-size: 16px;
  font-weight: normal;
}

.cont li span {
  color: #888;
  font-size: 12px;
  display: block;
}

.tbody {
  width: 98%;
  height: 1000px;
  display: flex;
  margin-top: 15px;
  margin-left: 15px;
}

.look {
  width: 70%;
  height: 664px;

  background-color: white;
}

.tit {
  width: 100%;
  height: 10%;
  line-height: 50px;
  margin-bottom: 5px;
}

.tit span {
  margin-left: 15px;
}

.el-icon-refresh-right {
  margin-right: 50px;
  line-height: 50px;
}

.ground {
  width: 100%;
  height: 77%;
}

.gul {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  list-style-type: none;
  box-sizing: border-box;
  margin-top: 20px;
  margin-left: 20px;
}

.gul > li {
  float: left;
  width: 21%;

  height: 100%;
  box-sizing: border-box;
  margin-left: 20px;
  position: relative;
  right: 20px;
}

.d1 {
  width: 100%;
  height: 10%;
  margin-bottom: 10px;
  background-color: rgb(43, 75, 171);
  border-radius: 8px;
}

.d1 img {
  width: 20px;
  display: flex;
  float: left;
  margin-top: 17px;
  margin-left: 10px;
  margin-right: 10px;
}

.d1 div {
  color: white;
  padding-top: 18px;
  font-family: "仿宋";
  font-weight: bold;
  text-indent: 20px;
  font-size: 17px;
}

.d2 {
  width: 100%;
  height: 80%;
  border: 1px solid #bbb;
}

.d2 div {
  border-bottom: 1px solid #bbb;
  width: 100%;
  height: 10%;
  font-size: 12px;
  line-height: 30px;
  padding-left: 15px;
  color: #2b4bab;
  background-color: #f4f6fb;
}

.d2 h3 {
  display: inline;
  font-weight: bold;
  font-size: 16px;
}

.dul {
  width: 100%;
  height: 90%;
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.dul > li {
  width: 100%;
  margin-top: 10px;
  border-bottom: 1px solid gray;
}

.right0 {
  width: 32%;
}

.right1 {
  width: 100%;
  height: 120px;
  margin-left: 15px;
  background-color: white;
  float: left;
}

.right1 > ul {
  list-style-type: none;
}

.xuqiu > li {
  font-size: 14px;
  float: left;
  margin-top: 15px;
  width: 15%;
  margin-left: 15px;
  position: relative;
  right: 20px;
}

.xuqiu > li > img {
  width: 40px;
  display: block;
  margin-left: 5px;
}

.right2 {
  width: 100%;
  height: 400px;
  margin-left: 15px;
  background-color: white;
  margin-top: 135px;
}

.caigou {
  border-bottom: 1px solid #d8d8d8;
  width: 85%;
  margin-left: 34px;
  font-size: 12px;
}

.caigou > tr {
  height: 40px;
}

.zhongxin {
  width: 66.8%;
  height: 400px;
  background-color: white;
  position: absolute;
  right: 32.1%;
  top: 810px;
}

.right3 {
  width: 100%;
  height: 700px;
  margin-left: 15px;
  background-color: white;
  margin-top: 15px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-left: 20px;
  height: 20px;
  width: 110vw;
}

.logo_text {
  font-family: "仿宋";
  font-size: 19px;
  fill: none;
  stroke: url("#geekColor");
  stroke-width: 1;
  stroke-dasharray: 10 800;
  stroke-dashoffset: 10;
  animation: 6s linear 0s drawing forwards;
}

/* 绘画动画 */
@keyframes drawing {
  to {
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
  }
}

.dul-title {
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  font-family: "仿宋";
  margin-left: 10px;
  margin-bottom: 6px;
  font-style: italic;
}

.title-details {
  font-size: 14px;
  color: gray;
  line-height: 28px;
  margin-left: 10px;
  font-family: "仿宋";
  font-weight: bold;
  font-style: italic;
}

.dul-title:hover {
  cursor: pointer;
  opacity: 0.8;
  color: red;
}

.empty-box {
  width: 177px;
  box-sizing: border-box;
  padding: 10px;
  height: 410px;
  margin-left: 1px;
  border: 1px solid #ccc;
}

.supName-box:hover {
  color: red;
  cursor: pointer;
}

.el-icon-refresh-right:hover {
  opacity: 0.6;
}

.expertName-box:hover {
  color: red;
  cursor: pointer;
}
@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");

:root {
  /* 主蓝色，按钮，社交图标 */
  --primary-color: #71b3dd;
  /* 主蓝色，深，导航 */
  --primary-dark-color: #4489b5;
  --text-color-gray: #8b979f;
  --text-color-light-gray: #c1c7cb;
  --text-color-dark-gray: #5a6f7c;
}

.all {
  margin: 0;
  padding: 0;
  font-size: 14px;
  box-sizing: border-box;
  font-family: "Raleway", "PingFang SC", "Microsoft Yahei", sans-serif;
}

.wrapper {
  /* 栅格布局，居中卡片 */
  display: grid;
  align-items: center;
  justify-content: center;
  height: 60vh;
}

.profile-card {
  display: grid;
  /* 12格栅格 */
  grid-template-columns: repeat(12, 1fr);
  /* 每个列之间的空隙是12px */
  column-gap: 12px;
  /* 卡片总宽度为627px */
  width: 647px;
  /* 卡片总高度为374px */
  height: 374px;
  box-shadow: 0px 0px 22px 3px rgba(0, 0, 0, 0.18);
}

.profile-image {
  /* 图片占5列 */
  grid-column: 8 / 13;
  max-width: 255px;
  width: 100%;
  height: 100%;
  /* 隐藏图片超出区域 */
  overflow: hidden;
  /* 垂直为靠上对齐 */
  align-self: start;
  /* 水平为靠右对齐 */
  justify-self: end;
}

.profile-image img {
  /* 图片放大，然后只显示一部分 */
  width: 100%;
  margin-top: 40px;
  height: 80%;
  box-sizing: border-box;
  overflow: hidden;
}

.content {
  /* 左边内容占7列 */
  grid-column: 1 / 8;
  padding: 38px 28px 20px 33px;
  position: relative;
}

nav {
  margin-bottom: 24px;
  display: flex;
  position: relative;
}

nav a {
  color: var(--text-color-gray);
  text-decoration: none;
}

nav a.active {
  color: var(--primary-dark-color);
}

nav a:not(:last-child) {
  margin-right: 40px;
}

nav .indicator {
  height: 2px;
  background: var(--primary-dark-color);
  bottom: -7px;
  left: 0;
  position: absolute;
  transition: 0.4s;
}

.content section {
  /* 堆叠个人简介和工作经历部分 */
  position: absolute;
  /* 默认都不显示  */
  opacity: 0;
  /* 淡出淡入效果 */
  transition: 0.3s ease-out;
}

.content section.active-section {
  /* 显示active-section */
  opacity: 1;
}

/* 名字、身份与关注按钮左右布局，各占一列，子栅格不受父栅格影响，是个全新的栅格布局 */
.personal-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* 名字 */
.title h1 {
  font-size: 2em;
  font-weight: 500;
}
/* 身份 */
.title p {
  color: var(--text-color-gray);
  font-size: 1em;
  margin: 6px 0 18px 0;
}
</style>
